<!-- Cascading Style Sheets by Frances Monaghan for Pearse's Web Mapping Module  -->



.text 
{
	font-family:Centaur;
}

/*for my full background*/
.body 
{
	background-image: url('CozyYarns.png');
	background-repeat: repeat;
	background-position: top left;
	background-size: auto;
}

/* for navigation bar */
.nav-banner 
{
	background-color: rgb(178, 196, 183);
	font-size: 40px;
	text-align: center;
	font-family: Centaur; 
	font-weight: bold;
	color: rgb(98, 55, 33);
	padding: 20px;
	margin-top:10px;
	margin-left: 200px; 
	margin-right: 200px;
}



/* for my main page heading divider */
.header 
{
	background: rgb(178, 196, 183);
	padding: 0px;
	margin-left: 200px;
	margin-right: 200px;
}


/* for my main page footer divider */
.footer 
{
	font-size: 18px;
	text-align: center;
	font-family: Centaur;
	color: rgb(98, 55, 33);
	background-color: rgb(230, 166, 109);
	padding: 1px;
	margin-top: 10px;
	margin-left: 200px; 
	margin-right: 200px;
}

/* for other dividers */
.SubDiv 
{
	font-size: 20px;
	font-family: Centaur;
	color: rgb(98, 55, 33);
	background-color: rgb(178, 196, 183);
	padding: 20px;
	margin-top: 10px;
	margin-right: 200px;
}

/* for dividers with centered text */
.SubDivOp 
{
	font-size: 30px;
	text-align: center;
	font-family: Centaur;
	color: rgb(98, 55, 33);
	background-color: rgb(178, 196, 183);
	padding: 20px;
	margin-top: 10px;
	margin-left: 200px; 
	margin-right: 200px;
}



/* For my image dividers */
.imgDiv 
{
	background-color: rgb(178, 196, 183);
	padding: 10px;
	text-align:center;
 	height: auto;
}

/* For my images in line to auto resize */
.image-row 
{
	display: flex;
	flex-wrap: wrap
  	height: auto;
	justify-content: center;
	gap: 20px;
	padding: 20px;
}

.image-row img
{
	flex: 1 1 300px; /* grow, shrink, base width */
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	border: 2px solid #ccc;
}

/* For my image boxes */
.image-container 
{
	width: 100%;
	max-width: 300px;
	margin: 10px;
	height: auto;
	background-color:rgb(230, 166, 109);
	padding: 50px;
	border-radius: 50px;
	justify-content: centre;
	display: flex;
	flex-direction: column;
	align-items: center;
	word-wrap: break-word;
	overflow-wrap: break-word;
}




/* align text left */
.lefttext 
{
    text-align: left;
}


/* line breaks */
.hrline
{
	width: 100%;
	border:0px; 
	height:4px; 
	background-color: rgb(98, 55, 33); 
}


/* Links */
/* Normal link */
a 
{
	color: rgb(98, 55, 33);
}

/* Hovered link */
a:hover 
{
	color: rgb(98, 55, 33);
}

/* Visited link */
a:visited 
{
      color: rgb(99, 96, 37);
}

/* Active link (when clicked) */
a:active 
{
      color: rgb(98, 55, 33);
}


/* for the tables */
.table 
{
	font-family: Centaur, sans-serif;
	border-collapse: collapse;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}


.td, th 
{
	border: 4px solid #dddddd;
	text-align: Centre;
	padding: 20px;
}


tr:nth-child(even) 
{
	background-color: rgb(165, 185, 167);
}

tr:nth-child(odd) 
{
	background-color: rgb(233, 133, 100);
}


/* List */
.centre-list 
{
	list-style-position: inside; 
	text-align: center;          
	padding: 0;                   
	margin: auto;                 
	max-width: auto;            
}


/* Contact Box */
.form-container 
{
	max-width: 90%;
	margin: 100px;
	background-color:rgb(230, 166, 109);
	padding: 100px;
	border-radius: 50px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.form-container h2 
{
	text-align: center;
	margin-bottom: 20px;
}

label {
	display: block;
	margin-bottom: 20px;
	font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea 
{
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

input[type="submit"] 
{
	background-color: rgb(178, 196, 183);
	color: rgb(98, 55, 33);
	border: none;
	padding: 20px 10px;
	border-radius: 10px;
	cursor: pointer;
	width: 89%;
	font-weight: bold;
	font-size: 30px;
	font-family: Centaur;
}

input[type="submit"]:hover 
{
	background-color: rgb(178, 196, 183);
	
}